<template>
  <Transition name="slide-left">
    <div v-if="showContact" class="contact-form flex flex-col">
      <PageHead
        title="新建联系人"
        :show-more="false"
        @back="showContact = false"
      ></PageHead>

      <form
        ref="formRef"
        class="pt-16 mt-16 flex-1 flex flex-col justify-between"
        style="background-color: white"
        @submit="submit"
      >
        <div class="px-16 pt-16 mt-16 flex-1">
          <div class="pl-12 text-999"> 新建联系人 </div>
          <List title="姓名" :show-arrow="false">
            <input
              v-model="form.name"
              required
              placeholder="请输入联系人姓名"
              type="text"
            />
          </List>
          <List title="微信号" :show-arrow="false">
            <input
              v-model="form.wx"
              required
              placeholder="请输入联系人微信号"
              type="text"
            />
          </List>
          <List title="头像">
            <span class="text-999">
              随机头像 <input v-model="randomAvatar" type="checkbox" disabled />
            </span>
          </List>
          <List title="地区" :show-arrow="false">
            <input v-model="form.area" placeholder="广东 广州" type="text" />
          </List>
          <List title="分组" :show-arrow="false">
            <input
              v-model="form.group"
              type="text"
              required
              placeholder="A-Z"
              class="group"
              :maxlength="1"
            />
          </List>
        </div>
        <div class="flex flex-s mb-32">
          <div class="comfirm">
            <button type="submit">确定</button>
          </div>
        </div>
      </form>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';
  import { ref } from 'vue';
  import { getUserStore } from '@/store/user/utils';
  import { multiavatar } from '@/api/common';
  import { showContact, currentContact } from './contact';
  import { IContact } from '../contacts/data';

  const randomAvatar = ref(true);

  const formRef = ref();
  const formObject: IContact = {
    name: '',
    wx: '',
    avatar: '',
    area: '',
    group: '',
    message: [],
    id: '',
    fakeMessage: [],
  };

  const form = ref({ ...formObject });
  const avatarType = ref('随机头像');

  const submit = () => {
    const e = window.event as FormDataEvent;
    e.preventDefault();
    const formEl = formRef.value as HTMLFormElement;

    if (formEl.checkValidity()) {
      const store = getUserStore();
      form.value.avatar = multiavatar(form.value.name);
      store.contacts.push({
        ...form.value,
      });
      form.value = {
        ...formObject,
      };
      showContact.value = false;
    }
  };
</script>

<style lang="scss" scoped>
  .contact-form {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: white;
    top: 0;
    left: 0;
    z-index: 20;
    .comfirm {
      background-color: var(--primary);
      color: white;
      width: 140px;
      line-height: 32px;
      height: 32px;
      text-align: center;
      button {
        width: 100%;
        height: 100%;
      }
    }
    form {
      select {
        line-height: 24px;
        height: 24px;
        width: 120px;
        border: none;
        background: none;
        -webkit-appearance: none; /* Safari 和 Chrome */
        -moz-appearance: none; /* Firefox */
        appearance: none;
      }
    }
    .group {
      /* 文字转成大写 */
      text-transform: uppercase;
    }
  }
</style>
